<?php $this->layout = "//layouts/column1"; ?>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<h1>View Video</h1>
<div style="background: #f9f9f9;padding: 3px 10px;border: 3px solid #eee;">
    <div class="form">
        <?php
        $form = $this->beginWidget('CActiveForm', array(
            'id' => 'video-form',
            'enableClientValidation' => false,
            'clientOptions' => array(
                'validateOnSubmit' => true,
            ),
                ));
        ?>

        <?php echo $form->errorSummary($model); ?> 

        <input id="mintime" type="hidden" value="<?php echo Yii::app()->params['minimum_time'] ?>" />
        <div class="grid-view" style="min-height: 500px" >
            <table class="items" style="width: 30%; border-radius: 10px; float: left">    
                <?php
                $resources = Resources::model()->findAll();
                foreach ($resources as $resource) {
                    if ($resource->status == '1') {
                        $mth = MemberTransactionHistory::model()->findByAttributes(array('resources_id' => $resource->resources_id, 'member_id' => Yii::app()->user->id));
                        if ($mth == NULL) {
                            $filepath = Yii::app()->request->baseUrl . "/videos/" . $resource->vedio;
                            ?>
                            <tr>
                                <td>
                                    <h4><?php echo $resource->vedio; ?></h4>

                                </td>
                                <td>
                                    <input type="hidden" value="<?php echo $resource->vedio; ?>" />
                                    <span id="<?php echo $resource->resources_id ?>" class="start" style="height: 30px; padding: 5px; border: 1px solid skyblue; cursor: pointer">Show</span>
                                </td>
                                <td>
                                    <h4>price: $ <?php echo $model->amount; ?></h4>
                                </td>
                            </tr>
                            <?php
                        }
                    }
                }
                ?>
            </table> 
            <div style="float: right; height: 400px; width: 70%; text-align: right">
                <div id="player"></div>
                <div>
                    <span style="float: left; margin-left: 30px; font-size: 15px">Now Playing:</span><span style="float: left; font-size: 15px" id="currentvideofilename"></span>
                    <span style="float: right;  font-size: 15px; color: green" id="msg"></span>
                </div>
            </div>
        </div>	
        <script>
            var tag = document.createElement('script');

            tag.src = "https://www.youtube.com/iframe_api";
            var firstScriptTag = document.getElementsByTagName('script')[0];
            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

            var player;
            function onYouTubeIframeAPIReady() {
                player = new YT.Player('player', {
                    height: '390',
                    width: '640',
                    videoId: '',
                    events: {
                        'onReady': onPlayerReady,
                        'onStateChange': onPlayerStateChange
                    }
                });
            }

            function onPlayerReady(event) {
                //event.target.playVideo();
            }

            var timeCounterInterval;
            var timer=0;
            var mintime = 0;
            var videoId = null;
            function onPlayerStateChange(event) {
                console.log(event.data);
                if(event.data == '1'){
                    timeCounterInterval = setInterval(function(){startTimeCounting()},1000);
                }else{
                    stopTimeCounting();
                }
            }
    
    
            function startTimeCounting()
            {
                timer++;
                //console.log(timer);
                // here code for checking time and go server for transaction
                if(timer > mintime){
                    $.ajax({
                        type: "POST",
                        url:    "<? echo Yii::app()->createUrl('memberPosition/generationTransaction'); ?>",
                        data:  {videoId:videoId},
                        success: function(msg){
                            console.log("Sucess")
                            $("#msg").html("Congratulation! Your job done");
                            stopTimeCounting();
                        },
                        error: function(xhr){
                            console.log("failure"+xhr.readyState+this.url)
                        }
                    });                    
                }
            }

            function stopTimeCounting()
            {
                clearInterval(timeCounterInterval);
            }
            
            $(function() {
                    
                $( ".start" ).click(function() {
                    clearInterval(timeCounterInterval);
                    timer=0;
                    mintime = $("#mintime").attr("value");
                    
                    var currentvidoId = $(this).parent().find("input[type=hidden]").attr("value");
                    $("#currentvideofilename").html(currentvidoId);
                    $("#msg").html("");
                    videoId = $(this).attr("id");
                    
                    player.loadVideoById(currentvidoId);                    
                });                                                
            });
        </script>
        <?php $this->endWidget();
        ?>
    </div>
</div>